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Introducción 


El XHTML consiste en diferentes componentes vitales. Veremos a continua- 
ción sus elementos, atributos, tipos de fecha y la declaración de tipo de docu- 


mento. 


Para hacerlo más comprensible, iremos construyendo un documento XHTML 
de forma paralela, a modo de ejemplo, en cada uno de los elementos que ex- 


plicaremos. 


El lenguaje XHTML se puede crear y modificar con cualquier editor de texto 
básico, como puede ser el Bloc de Notas de Windows, o cualquier otro editor 
que admita texto sin formato GNU Emacs, Microsoft Wordpad, TextPad, Vim, 
Note pad++... 


Programas WYSIWYG 


Hay también otros programas para la realización de sitios web o edición de código 
XHTML, como por ejemplo el Dreamweaver de Adobe, el Expression Web de Microsoft 
o el CompoZer. A estos programas se los conoce como WYSIWYG o what you see is what 
you get (lo que ves es lo que obtienes'). Esto significa que son editores en los cuales se ve 
el resultado de lo que se está editando en tiempo real a medida que se va desarrollando 
el documento. Ahora bien, esto no significa una manera diferente de realizar webs, sino 
una manera más sencilla, ya que estos programas, además de tener la opción de trabajar 
con la vista preliminar, tienen su propia sección XHTML, la cual va generando el código 
a medida que se va escribiendo. 


Para empezar y tener más claro el concepto, nosotros utilizaremos un editor 


de texto simple, en nuestro caso, el Bloc de Notas de Windows. 
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1. Elementos principales 


Antes de ver los elementos que componen un XHTML diremos, como intro- 
ducción, que un archivo XHTML está formado por elementos y contenido. 
Los elementos delimitan el contenido y le dan información adicional, que será 
interpretada por el navegador. Un elemento está compuesto, normalmente, 
por dos etiquetas. Si el elemento es de tipo vacío sólo será necesaria una, como 


veremos más adelante. 
Aquí tenemos un ejemplo: 

<p>este texto quiero que sea un párrafo</p> 
El elemento p está definido por dos etiquetas: <p> y </p>. 
Estas etiquetas están colocadas al inicio y al final de la frase que queremos de- 
limitar como párrafo. La etiqueta <p> estará al inicio, mientras que la etiqueta 
</p> estará al final. Es decir, el signo / dentro de la etiqueta quiere decir que 
cerramos el elemento. 
No todos los elementos se tienen que cerrar de la manera que acabamos de 
ver. Por ejemplo, cuando queramos introducir una imagen, lo haremos de la 
manera siguiente: 


<img src="imgs/imagenl.J3pg"/> 


A esto lo llamaremos, como ya hemos adelantado, elementos vacíos, ya que 


no tienen contenido dentro de las etiquetas. De hecho, sería lo mismo escribir 
<img src="imgs/imagenl.J3Jpg"></img> 


Una vez hemos visto cómo funcionan los elementos HTML, otro aspecto im- 
portante que hay que tener en cuenta es que los elementos HTML se pueden 


"imbricar" los unos con los otros de la manera siguiente: 
<div> <p>Este texto es un párrafo dentro de una capa</p></div> 


Aquí vemos cómo el elemento p está dentro del elemento <div>; por lo tanto, 
el texto estará afectado por las dos etiquetas. A la hora de cerrar los elementos, 
se tiene que tener una precaución especial, ya que el primer elemento en ser 


cerrado será el último elemento que hemos abierto. 
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Otro aspecto importante que hay que conocer de los elementos es que éstos 
pueden tener atributos. Los atributos especifican características particulares 
del elemento. Los atributos se componen del nombre del atributo seguido de 
un signo = y entre comillas el valor del atributo. 


<a href="http://www.example.com">Link en un web</a> 


En este ejemplo, el atributo href tiene como valor "http://www.example.com" 


y especifica cuál es la dirección a la que queramos enlazar. 
Separación de atributos en documentos CSS 
Más adelante, cuando profundicemos en el estudio de las hojas de estilo, veremos que 
es mejor tener separados ciertos atributos de los elementos en documentos CSS, tanto 


para la comprensión global del documento como para conseguir, al mismo tiempo, una 
mejor valoración de nuestra web por parte de los motores de búsqueda (Google, Yahoo). 


Una vez hemos visto cómo funciona el sistema de etiquetado del XHTML, 


veremos cuáles son sus elementos principales. 


1.1. Declaración XML 


El primer elemento que escribiremos en nuestro documento XHTML es el de 
declaración de XML. Veremos un ejemplo y lo comentaremos. 


Comenzaremos, pues, a construir nuestro documento. Abriremos nuestro edi- 


tor de texto y escribiremos la línea siguiente. 


<?xml version="1.0" encoding="UTF-8"?2> 


Ml index.html - Bloc de notas lol xj 
Archivo Edición Formato Ver Ayuda 
<?xml version="1.0" encoding="UTF-8"?> 





Guardaremos el documento que acabamos de crear con el nombre de 
"index.html". Para comprobar cómo interpreta nuestro código un navegador, 
es decir, cómo se visualiza en un navegador, tendremos que ir hasta el archivo 
"index.html", hacer clic con el botón derecho y, de las opciones que nos salgan, 
escoger un navegador (Internet Explorer o Firefox son los más habituales). En 
caso de que no nos saliera un navegador para escoger, lo podremos hacer de 
la manera siguiente: abriendo primero el navegador y, después, arrastrándolo 


adentro de nuestro archivo "index.html". 
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La declaración XML es un tipo especial de elemento. Como excepción, no 
cerraremos el elemento de la forma usual, y sirve para indicar al navegador qué 
versión de XML queremos utilizar. En el atributo "encoding" especificaremos 
la codificación de caracteres que necesitaremos en nuestro documento. En 


principio, el valor "UTF-8" sería suficiente para la mayoría de los casos. 


Enlace recomendado 


No profundizaremos en el asunto de las codificaciones, ya que puede ser muy ex- 
tenso y, en principio, se escapa de los objetivos de este curso. Para conocer más 
sobre codificaciones, podéis ir a la siguiente dirección: http://es.wikipedia.org/wiki/ 
Codificaci4C3%B3n_de_ caracteres 


1.2. Declaración DTD 


Con este elemento, se indica el documento público que contiene las reglas 
de sintaxis y gramática con las cuales se determina si el documento actual es 


válido o no con respecto a la versión del lenguaje indicada. 


Mediante este documento, las aplicaciones de validación verifican que todos 
los elementos estén correctamente imbricados y que las etiquetas y atributos 


que contienen son válidos. 


Hay distintos DTD (definición de tipo de documento) que establecen los dife- 
rentes grados con los cuales un documento XHTML tiene que ajustarse a las 
reglas de gramática y sintaxis del XML. En concreto, hay tres tipos de DTD 
que podemos especificar en nuestro documento. A continuación, veremos los 
más significativos, ya que hay uno que es sólo para cuando utilizamos frames 
y, por lo tanto, lo obviaremos. 


Así pues, veremos qué forma tienen los más significativos, de menos a más 


restrictivos: 


e  Transicional. El DTD transicional permite el uso de algunos elementos y 
atributos antiguos del HTML que, actualmente, están en desuso. 


<!DOCTYPE html PUBLIC "-—//W3C//DTD XHIML 1.0 Transitional//EN" 


"http: //www.w3.org/TR/xhtml11/DTD/xhtmll-transitional.dtd"> 
e  Estricto. Es el DTD más estricto: no soporta ninguna etiqueta antigua y el 
código tiene que seguir estrictamente los estándares, lo cual nos ayudará 


a tener nuestra web más estructurada. 


SIDO IB NS DEMAS alte AN 


"http: //www.w3.org/TR/xhtml11/DTD/xhtmll-strict.dtd"> 


En nuestro caso, utilizaremos el estricto. 
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Si seguimos con nuestro archivo "index.html", el código quedaría de la forma 


siguiente: 


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Strict//EN" 


MEEDE i wa. org TE <html 1/DTD/xhtmllostrict.dua"> 


AOS 





Archivo Edición Formato Ver Ayuda 

<?xml version="1.0" cad jo p> 

<!DOCTYPE html PUBLIC "-//wW3C//DTD XHTML 1.0 Strict//EN” 
"http://www. w3.org/TR/xhtml1/DTO/xhtml1-strict.dtd”> 

l 





1.3. Elemento HTML 


Éste es el elemento raíz de nuestro documento. El atributo xm1ns indica el 
espacio nominal para el XHTML. Los espacios nominales quieren decir el con- 
junto de etiquetas y atributos que forman el vocabulario del XHTML. Los atri- 
butos lang y xml:lang especificarán el idioma principal del documento. 


No olvidemos que este elemento sí que lo tenemos que cerrar correctamente, 


al contrario de los dos anteriores. 
Aquí podemos ver un ejemplo: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"></html> 
donde "es" es el código ISO del español. 
En nuestro ejemplo, añadiremos otra línea y nos quedará así: 
<?xml version="1.0" encoding="UTF-8"?> 
<SIDOSINERN BASS DIA IMA OA S uue/7EN 


Me oe aa. Ma Oro TER html 1 /DTD/:htmllosteict.dua"> 


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"></html> 


AOS 





Más información sobre 


el elemento HTML 


<?xml version="1.0" Sa e y A 

<!DOCTYPE html PUBLIC "-//w3C//DTD XHTML 1.0 Strict//EN"” 

O A  e  A 
xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"></html> Para más información po- 


déis ir al enlace siguiente: 
http://www.w3.org/Interna- 
tional/articles/language-tags/ 
Overview.es.php 





<htm 
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1.4. Elemento HEAD 


El elemento head contiene información sobre el documento actual, como el 
título, palabras clave que pueden ser de utilidad para motores de búsqueda 
y otros datos que no se consideran parte del contenido del documento. La 
información que contiene también se puede llamar meta-información. Meta 


significa 'información sobre. 


A continuación, tenemos un ejemplo con algunos de los meta más comunes: 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola" /> 

<meta name="description" content="La gastronomía en la Garrotxa" /> 
<meta name="keywords" content="gastronomia, garrotxa" /> 


</head> 


Veamos diferentes elementos meta. 


Estos elementos sirven para definir información adicional en nuestro docu- 


mento, como autor, descripción del contenido de la página y palabras clave. 


Si lo añadimos a nuestro ejemplo, nos quedará lo siguiente: 


<?xml version="1.0" encoding="UTF-8"?> 

<"DOCTYPE html PUBLIC "=P M3C//DED XAML 1.0 Strict EN" 
"DEEpDI//maWw.W3.oro/TR/2htmll/DFD/=htemll=steict.dta"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola" /> 

<meta name="description" content="La gastronomía en la Garrotxa" /> 
<meta name="keywords" content="gastronomia, garrotxa" /> 

</head> 


</html> 


1 Sin título - Bloc de notas Mi E 
Archivo Edición Formato Ver Ayuda 
<?2xml version="1.0" encoding="UTF-8">?>> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //ww.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> 

<html xmlins="http://ww.w3.org/1999/xhtml1" xml:lang="es" lang="es"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 


<meta name="author" content="Pere Barnola" /> 

<meta name="description" content="La gastronomía en la Garrotxa" /> 
<meta name="keywords" content="gastronomía, garrotxa" /> 

</head> 

</html> 
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1.5. Elemento TITLE 


El elemento title es de gran importancia, pues sirve para identificar los con- 
tenidos de un documento. A causa de que los usuarios a menudo consultan 
documentos fuera de contexto, tendríamos que proporcionar títulos ricos en 
contexto. 


Así, en lugar de utilizar un título como "introducción", que no proporciona 
mucha información del contexto, tendríamos que cambiarlo por un título del 


estilo "Introducción a la gastronomía de la Garrotxa". 


Veamos un ejemplo: 


<title>Introducción a la gastronomía de la Garrotxa</title> 


Además, buscadores como Google o Yahoo dan más prioridad al title a la 
hora de dar importancia a las webs en sus resultados que a otros elementos. 


Hay que tener en cuenta que el elemento title va dentro del elemento head 


que hemos visto antes. 


Añadimos este elemento a nuestro documento: 


<?xml version="1.0" encoding="UTF-8"?> 

<"DOCTYPE html PUBLIC "=/(WM3C// DTD XHIML 1.0 Strict EN" 
"DEEtp3//maw.w3.oro/TR/2htmll/DTD/xhtmll=sterict.dta"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<title>Introducción a la gastronomía de la Garrotxa</title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola" /> 

<meta name="description" content="La gastronomía en la Garrotxa" /> 
<meta name="keywords" content="gastronomia, garrotxa" /> 

</head> 


</html> 


O E -ioi xi 
Archivo Edición Formato Ver Ayuda 


<?2xml version="1.0" encoding="UTF-8">2> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //www.w3.org/TR/xhtm11/DTD/xhtmli-strict.dtd"> 

<html xmlns="http://ww.w3.org/1999/xhtm1" xml:lang="es" lang="es"> 
<head> 

<title>Introducción a la gastronomía de la Garrotxa</title> 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola" /> 

<meta name="description" content="La gastronomia en la Garrotxa" /> 
<meta name="keywords" content="gastronomía, garrotxa" /> 

</head> 

</html> 
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Si probamos el index.html en un navegador, tendríamos que ver una cosa 


parecida a lo siguiente: 


Introducción a la gastronomia ri 


Archivo Editar Ver Historial Delicious Herramientas Ayuda 


rex Ea i 

















Como apreciamos en la imagen, la página aparece en blanco porque todavía 
no tiene ningún contenido, pero podemos observar cómo, en la parte superior 
del navegador (con fondo de color azul), sale nuestro título. ¡Vamos por buen 


camino! 


1.6. Elemento BODY 


Si el elemento head contenía toda la información sobre el documento, el ele- 
mento body contiene todo el contenido. Nos tenemos que imaginar este ele- 
mento como una hoja en blanco sobre la cual aparecerá todo el contenido: 


texto, imágenes, colores, gráficos... 


Más adelante, veremos todos los elementos que pueden estar en el body. 


De momento, lo añadiremos a nuestro documento, que nos quedaría así: 


<?xml version="1.0" encoding="UTF-8"?> 
<IDOCTYPE html PUBLIO "<= (WSOC/y/ DTD XHTML LD Strict EN" 

WE LEPI MO O LO TE neal Ll DTD <html lesterict. da" 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<title>Introducción a la gastronomía de la Garrotxa</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola" /> 
<meta name="description" content="La gastronomía en la Garrotxa" /> 
<meta name="keywords" content="gastronomia, garrotxa" /> 


</head> 
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<body> 
</body> 


</html> 


1 index.html - Bloc de notas -ioj x| 
Archivo Edición Formato Ver Ayuda 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //wnw.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> 

<html xmlins="http://w.w3.org/1999/xhtm1" xml:lang="es" lang="es"> 

<head> 

<title>Introducción a la gastronomía de la Garrotxa</title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<meta name="author" content="Pere Barnola" /> 


<meta name="description" content="La gastronomía en la Garrotxa" /> 
<meta name="keywords" content="gastronomía, garrotxa" /> 
</head> 





1.7. Un documento XHTML básico 


A lo largo de los puntos que hemos estado viendo, hemos configurado un do- 
cumento XHTML. Este documento sería un documento XHTML básico, pero 


sin ningún tipo de contenido. 


Añadiremos ahora una pequeña parte de contenido para adelantar lo que ve- 


remos en los puntos siguientes: 


<?xml version="1.0" encoding="UTF-8"?> 

<IDOCTYPE html PUBLIC "<= NOC DEEE E ee ENA 

"DEEP AEE a S O R o AD de eae ee 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 

<head> 

<title>Introducción a la gastronomía de la Garrotxa</title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<meta name="author" content="Pere Barnola" /> 

<meta name="description" content="La gastronomía en la Garrotxa" /> 

<meta name="keywords" content="gastronomia, garrotxa" /> 

</head> 

<body> 

<hl>La gastronomía en la Garrotxa</hl> 

<ol> 

<li><a href="fintroducción" title="Descripción del taller">Introducción</a></1i> 
<li><a href="fplatos_típicos" title="Conocimientos a adquirir">Platos típicos</a></1li> 
<li><a href="festadísticas" title="Guías que se 

utilizan">Estadísticas</a></li> 

</o1> 

</body> 


</html> 
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E index html - Bloc de notas -ioj xi 
Archivo Edición Fomato Ver Ayuda 

<?2xml version="1.0" encoding="UTF-8">2> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //wwmw.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> 

<html xamlns="http://wnw.w3.org/1999/xhtm1" xml:lang="es" lang="es"> 
<head> 

<title>Introducción a la gastronomía de la Garrotxa</title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola" /> 

<meta name="description" content="La gastronomía en la Garrotxa" /> 
<meta name="keywords" content="gastronomía, garrotxa" /> 

</head> 


gastronomía en la Garrotxa</hi> 


href="*+introduccion" title="Descripción del taller">Introducción</a></1li> 
href="fplatos_ tipicos" title="Conocimientos a adquirir">Platos típicols</a></1i> 
href="ftestadisticas" title="Guias que se 
utilizaríamp;aacute;n">Estadisticas</a></li> 
</ol> 





En primer lugar, podemos ver los elementos xml y DOCTYP] 





E 


, Necesarios, CO- 
mo hemos visto, para determinar cuáles serán las características esenciales de 


nuestro documento. 


Seguidamente, el elemento html que abre y cierra toda la estructura de ele- 
mentos. Dentro de este elemento encontramos dos más: head y body. Recor- 
demos que el elemento head nos ofrece información sobre el documento, co- 
mo el título o su descripción, y el elemento body es el que contendrá todo el 


contenido de nuestro documento. 


Adelantándonos un poco a lo que veremos más adelante, dentro del elemento 


body vemos otros elementos que nos permitirán etiquetar nuestro contenido. 


Si visualizamos el archivo en un navegador, tendríamos que ver algo parecido 
a lo siguiente: 


Introducción a la gastronomia de la Garotxa - Mozilla Firefox 


Archivo Editar Ver Historial Delicious Heramientas Ayuda 


QO ce x va kd 4 














La gastronomía en la Garrotxa 


1. Introducción 
2. Platos tipicos 
- Estadisticas 


w 


Lo primero que vemos es el elemento h1 que equivale al encabezamiento de 
tipo 1, seguido de un elemento o1 que equivale a una lista ordenada, elemen- 
tos que veremos acto seguido. 
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2. Etiquetas y elementos 


Veremos en este punto los elementos básicos para etiquetar nuestro contenido 
XHTML. 


2.1. Encabezamientos 


Cuando queramos que un texto sea un titular o texto destacado dentro del 


contenido, utilizaremos los encabezamientos. 


Los encabezamientos se pueden generar mediante 6 etiquetas diferentes h1, 
h2, h3, h4, h5 y h6 que tienen una jerarquía de más a menos importancia. 
Los encabezamientos se tienen que utilizar de forma jerárquica y sin saltarnos 
ningún nivel. Es decir, después del h1, vendrá el h2 y así consecutivamente, 


sin que podamos pasar por ejemplo del h1 al h6 de forma directa. 
Un ejemplo de uso correcto de encabezamientos sería: 


<h1> Encabezamiento con elemento h1</h1> 


<h2> Encabezamiento con elemento h2</h2> 
El ejemplo siguiente sería incorrecto: 


<h1> Encabezamiento con elemento h1</h1> 


<h6> Encabezamiento con elemento h6</h6> 


Por defecto, los encabezamientos de mayor importancia tienen un cuerpo de 
letra mayor, aunque, como veremos en el capítulo dedicado a las hojas de es- 
tilo, podremos definir un estilo y un tipo de letra específico para cada enca- 


bezamiento. 


Otro punto muy interesante, con vistas al buen posicionamiento de nuestra 
página web en los buscadores más utilizados (Google, Yahoo) es que éstos dan 
más importancia a un texto etiquetado como encabezamiento que a otro de 


otro tipo. 
Hay que decir, además, que los encabezamientos permiten saber a los navega- 
dores cuándo empieza y cuándo acaba una nueva sección, lo cual facilita la 


experiencia de usuario. 


Siguiendo nuestro ejemplo, incluiremos los elementos de encabezamiento. El 


código que nos quedaría sería el siguiente: 


<?xml version="1.0" encoding="UTF-8"?> 
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<IDOCTYPE html PUBLIC "=((NSC//DID O XETML 1D Strici/ EN" 

"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<hl>La gastronomía en la Garrotxa</hl1> 

<h1>Menú</h1> 

<h2>1. Introducción</h2> 

<h2>2. Platos típicos</h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<h4>Receta:</h4> 

<h2>3. Estadísticas</h2> 

</body> 


</html> 


Bl index him - Bloc de notas -Jol xi 
Archivo Edición Fomato Ver Ayuda 

<?xml version="1.0" encoding="UTF-8"?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //ww.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd"> 

<html xmlins="bttp://ww.w3.org/1999/xhtm1" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia" /> 
<title>Introducción a la gastronomik de la Garrotxa</title> 
</head> 

<body> 

<hi>La gastronomia en la Garrotxa</n1> 

<hi>Menu </h1> 

<h2>1. Introducción</n2> 

<h2>2. Platos tíipicos</h2> 

<h3>PANELLETS DE CASTANYA</n3> 

<h4>Ingredientes:</n4> 

<h4>Receta: </h4> 

<h2>3. Estadisticas</h2> 





Si lo visualizamos en un navegador, nos quedará así: 
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Introducción a la gastronomia de la Garotxa - Mozilla Firefox 


Archivo Editar Ver Historial Delicious Hemamientas Ayuda 


OTF cecx oek A 

















La gastronomía en la Garrotxa 


Menu 
1. Introducción 


2. Platos típicos 
PANELLETS DE CASTANYA 


Ingredientes: 


Receta: 


3. Estadísticas 


Podemos apreciar cómo, según los tipos de encabezamiento escogido, el tipo 
de letra es mayor o más pequeño. 


2.2. Párrafos 


Los párrafos son grupos de texto delimitados por las etiquetas <p> y </p>. 
Cada párrafo queda delimitado visualmente por un salto de línea. Haciendo 


el paralelismo, sería lo mismo que un párrafo de un artículo o un libro. 


Dentro de un elemento de párrafo no podremos poner otro elemento de tipo 
párrafo, siempre que estemos utilizando XHTML de tipo "strict". Es decir, no 
los podremos "imbricar". 


Ejemplo de código de párrafo 


<p>Este texto es un párrafo. Básicamente lo utilizaremos 


para delimitar grupos de texto</p> 
Incluiremos elementos de párrafo en nuestro documento y nos quedará así: 


<?xml version="1.0" encoding="UTF-8"?> 

<IDOCTYPE himl PUBLIC "=WN3C/DID XHTML L.D Strict EN" 

"DELI UA WO OL O TR Rita DTD/ him l=strict.dua"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 


</head> 
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<body> 
<hl>La gastronomía en la Garrotxa</hl> 
<h1>Menú</h1> 


<“hz> le, Introducción: A 


<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

DOS picos > 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 


<h4>Receta:</h4> 


<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 

<h2>3. Estadísticas</h2> 

<p>Documento conforme W3C <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://jigsaw.w3.org/css-validator/" title="Hojas de 
estilo revisadas con el validador del W3C">CSS 2.0</a>| 

<a href="http://www.tawdis.net/taw3/online" title="Nivel de 
adecuación doble A, conforme a las directrices de la Web 
Accessibility Initiative">WAI AA</a></p> 

</body> 


</html> 
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1 index html - Bloc de notas 

Archivo Edición Fommato Ver Ayuda 

<?xml version="1.0" encoding="UTF-8">> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //ww.w3.org/TR/xhtm11/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://wmw.w3.org/1999/xhtm1" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 





<hi>La gastronomía en la Garrotxa</h1> 

<h1>Menú</n1> 

<h2>1. Introducción</n2> 

<p>La Garrotxa es una comarca de transición entre la montaña y el valle que 
se extiende entre el Pirineo y la Sierra Transversal. A pesar de la 
complejidad de la comarca, se distinguen dos sectores bien diferenciados y 
delimitados: la Alta Garrotxa y la Baixa Garrotxa. La primera, de relieve 
difícil, con poca vegetación, llena de congostos, simas y cuevas, da nombre a 
la comarca - Garrotxa = tierra áspera y rota -, y un placer para los 
excursionistas; la Baixa Garrotxa, de tierras suaves, plana, con prados 
abundantes y corrientes de agua.</p> 

<h2>2. Platos típicos</h2> 

<h3>PANELLETS DE CASTANYA</h3> 

<h4>Ingredientes:</h4> 

<h4>Receta: </h4> 

<p>Preparad un puré seco de castañas. Para hacerlo hay que escaldarlas, 
pelarlas y hervirlas en un recipiente donde el agua las cubra. Después se 
pasan por el cedazo. A parte, se elabora el mazapán; Siguiendo la misma 
receta de los panallets de piñones. 

De la masa resultante, tomar una tercera parte y mezclarla con el puré de 
castaña. Trabajarlo sobre el mármol espolvoreado con azúcar y dividirlo en 
piezas redondeadas. Untarlas con clara de huevo batida y con unas gotas de 
agua y espolvorearlas con azucar. Finalmente hay que cocerlas a horno vivo 
(200 o 220 grados) entre 6 y 7 minutos.</p> 

<h2>3. Estadisticas</h2> 

<p>Documento conforme W3C <a href="http://validator.w3.org/" 

title="Código revisado con el validador del W3C">XHTML 1.0</a>] 

<a href="http://jigsaw.w3.org/css-validator/" title="Hojas de 

estilo revisadas con el validador del W3C">CSS 2.0</a>|<a 
href="bttp://ww.tawdis.net/taw3/online" title="Nivel de 

adecuación doble A, conforme a las directrices del Web 

Accessibility Initiative">WAI AA</a></p> 





Vemos cómo se visualizará este código en el navegador: 
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La gastronomía en la Garrotxa 


Menú 


1. Introducción 


La Garrotxa es una comarca de transición entre la montaña y el valle que se extiende entre el Pirineo y 
la Sierra Transversal. A pesar de la complejidad de la comarca, se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baixa Garrotxa. La primera, de relieve dificil, con 
poca vegetación, llena de congostos, simas y cuevas, da nombre a la comarca - Garrotxa = tierra 
áspera y rota -, y un placer para los excursionistas; la Baixa Garrotxa, de tierras suaves, plana, con 
prados abundantes y corrientes de agua. 


2. Platos típicos 

PANELLETS DE CASTANYA 

Ingredientes: 

Receta: 

Preparad un puré seco de castañas. Para hacerlo hay que escaldarlas, pelarlas y hervirlas en un 
recipiente donde el agua las cubra. Después se pasan por el cedazo. A parte, se elabora el mazapán; 
Siguiendo la misma receta de los panallets de piñones. De la masa resultante, tomar una tercera parte y 


mezclarla con el puré de castaña. Trabajarlo sobre el mármol espolvoreado con azúcar y dividirlo en 
piezas redondeadas. Untarlas con clara de huevo batida y con unas gotas de agua y espolvorearlas con 


amame Dinalaianta har mia ananrlan a hamia rea FINNA a PINA mendan mtrs o Ts 


2.3. Enlaces 

Uno de los elementos básicos a la hora de crear páginas web son los enlaces. 
Los enlaces son los elementos que nos permiten navegar por la web, es decir, 
ir a otras páginas de una misma web, o a páginas de webs externas. También 
podemos enlazar a diferentes partes de un mismo documento. 

El elemento utilizado para crear vínculos es a. Aquí tenemos un ejemplo: 


<a href="http://www.webexterna.com">Enlace a una web externa</a> 


El valor del atributo href nos indica hacia dónde apuntará nuestro enlace. En 


este caso, estamos enlazando a una página web externa. 


También es posible enlazar a otras páginas dentro de nuestra web. En este caso, 
el código sería así: 


<a href="href="index.html">Enlace interno en el Índice de nuestra web</a> 


En este caso, estamos creando un enlace en el documento index.html dentro 


de nuestra estructura de archivos. 


El valor del atributo href ha de ser la ruta del documento al que quiero enlazar. 
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También es posible enlazar a una parte concreta de nuestro documento. Para 
eso, necesitaremos dos valores. Uno para indicar la parte enlazable y el otro 


para indicar la posición a la cual queremos ir. 


Así pues, en nuestro código tenemos que tener, por una parte, marcado con 


el elemento a, la parte enlazable: 


<a href="fmenu">Ir al menú</a> 


Vemos cómo el atributo href comienza por el signo +. Eso quiere decir que 
estamos enlazando a una parte concreta dentro de nuestro documento. Con- 
cretamente, nos moveremos hacia la parte del documento que contenga un 


elemento con el atributo id igual al que está especificado después del +. 


Por tanto, para que el enlace funcione, nos tendríamos que asegurar de tener 


un elemento dentro del documento con el identificador. 


Del estilo: 


<a id="menu" >Menú de nuestra web</a> 


Vemos cómo el ID es aquél al que hacíamos referencia en el enlace. Por lo 
tanto, cuando hacemos clic en el enlace, nos dirigiremos a la parte del docu- 


mento especificada. 


Si incluimos enlaces en nuestro documento de ejemplo, el código quedaría así: 


<?xml version="1.0" encoding="UTF-8"?2> 

<IDOCIYPE emi PUBLIC: "=/IMSE//DID XHTML LD Sick EN" 

"http: //www.w3.org/TR/xhtml11/DTD/xhtmll-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<hl>La gastronomía en la Garrotxa</hl> 

<h1>Menú</h1> 

<a href="fintroducción" title="Descripción del taller">Introducción</a> 
<a href="fplatos_típicos" title="Conocimientos a adquirir">Platos típicos</a> 
<a href="ftestadistícas" title="Guías que se utilizan">Estadísticas</a> 
<h2><a id="introduccion">1. Introducción</a></h2> 

<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 


complejidad de la comarca se distinguen dos sectores bien 


O FUOC e P08/93133/01328 23 


Contenido y estructura de un documento XHTML 





diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 


La primera, ferega y de relieve difícil, con poca vegetación llena de 


desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 


áspera y rota'-, y un paradper a los excursionistas; la Baja 
Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2><a id="platos_típicos">2. Platos típicos</a></h2> 
<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 

<h2><a id="estadísticas">3. Estadísticas</a></h2> 

<p>Documento conforme W3C <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://jigsaw.w3.org/css-validator/" title="Hojas de 
estilo revisadas con el validador del W3C">CSS 2.0</a>| 

<a href="http://www.tawdis.net/taw3/online" title="Nivel de 
adecuación doble A, conforme a las directrices de la Web 
Accessibility Initiative">WAI AA</a></p> 


</body> 


</html> 





iol xi 
Archivo Edición Formato Ver Ayuda 

<?xml version="1.0" encoding="UTF-8"?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.o0org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.o0org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<hi>La gastronomía en la Garrotxa</h1> 

<hi1>Menú</ni1> 

<a href="fintroduccion" title="Descripción del taller">Introducción</a> 


<a href="$platos tipicos" title="Conocimientos a adquirir">Platos típicos</a> 
<a href="festadisticas" title="Guías que se 
utilizartamp;aacute;n">Estadisticas</a> 


<h2><a id="introduccion">1. Introducción</a></n2> 

<p>La Garrotxa es una comarca de transición entre la montaña y el valle que 

se extiende entre el Pirineo y la Sierra Transversal. A pesar de la 

complejidad de la comarca, se distinguen dos sectores bien diferenciados y 
delimitados: la Alta Garrotxa y la Baixa Garrotxa. La primera, de relieve 
difícil, con poca vegetación, llena de congostos, simas y cuevas, da nombre a 
la comarca - Garrotxa = tierra áspera y rota -, y un placer para los 
excursionistas; la Baixa Garrotxa, de tierras suaves, plana, con prados 
abundantes y corrientes de agua.</p> y 
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Vemos el impacto de este código en el navegador. 
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La gastronomía en la Garrotxa 


Menú 
Introducción Platos tipicos Estadisticas 
1. Introducción 


La Garrotxa es una comarca de transición entre la montaña y el valle que se extiende entre el Pirineo 
y la Sierra Transversal. A pesar de la complejidad de la comarca, se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baixa Garrotxa. La primera, de relieve dificil, con 
poca vegetación, llena de congostos. simas y cuevas, da nombre a la comarca - Garrotxa = tierra 
áspera y rota -. y un placer para los excursionistas; la Baixa Garrotxa, de tierras suaves, plana, con 
prados abundantes y corrientes de agua. 


2. Platos típicos 


PANELLETS DE CASTANYA 


Ejemplo 


Como podemos apreciar por la imagen, los enlaces se diferencian de otros elementos 
porque, a la hora de visualizar el documento, éstos salen subrayados y de color azul. Si 
hacemos clic con el ratón, veremos cómo los enlaces internos nos redireccionan a la parte 
de contenido marcada, y si hacemos clic en los externos, vamos a la página especificada. 


2.4. Imágenes 


Introducir imágenes en nuestro documento XHTM puede ayudarnos a expli- 


car más fácilmente nuestra información. 


Para incluir imágenes en nuestro documento XHTML, utilizaremos el elemen- 
to img. Será necesario especificar una serie de atributos. Lo más importante 
es el atributo src que sirve para indicar la dirección o lugar en el cual se en- 


cuentra la imagen que queremos incluir en el documento. 
Así pues, la sintaxis quedará de la forma siguiente: 


<img src="foto_garrotxa.gif" alt="imagen del cráter de Santa 


Margalida" width="376" height="226" /> 


Formatos GIF y JPG 


Hay que indicar que los formatos de imagen reconocidos universalmente por todos los 
navegadores son el GIF y el JPG. La utilización de otros tipos de imágenes en nuestro 
documento podría comportar que, a la hora de visualizarlas en el navegador, éstas no 
aparezcan ni se muestren de forma correcta. De todos modos, la mayoría de navegadores 
ya aceptan formatos de imágenes con mejores prestaciones, como podrían ser el PNG 
y el SVG. 
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Otro atributo importante del elemento img es el alt. Este atributo sirve para 
indicar una descripción alternativa en la imagen para usuarios que no puedan 
visualizarla. Teniendo en cuenta que hay usuarios que tienen deshabilitada la 
opción de visualización de imágenes mientras navegan, o simplemente no las 
pueden visualizar (como colectivos de discapacidades visuales), este atributo 


es importante para hacer que nuestro documento sea más accesible. 


Los atributos width y height no son obligatorios, y si no los especificamos, 
se cogen por defecto los valores de la imagen original. 


Incluiremos una imagen en nuestro documento a modo de ejemplo: 


<?xml version="1.0" encoding="UTF-8"?> 

IDOCLIEE Mim PUBLIC" "Y MIC/Y DIO HIM LO SELLO ENS 

WHEN MIA OL TRY Sal DTD als tic alar 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<hl>La gastronomía en la Garrotxa</hl> 

<h1>Menú</h1> 

<a href="fintroducción" title="Descripción del taller">Introducción</a> 
<a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a> 
<a href="ftestadisticas" title="Guías que se utilizan">Estadísticas</a> 
<h2>1. Introducción<a name="introducción"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" width="376" height="226" /> 
<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 


con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
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mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 

<h2>3. Estadísticas<a name="estadisticas"></a></h2> 

<p>Documento conforme W3C <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://Jigsaw.w3.org/css-validator/" 

title="Hojas de estilo revisadas con el validador del W3C">CSS 2.0</a>| 
<a href="http://www.tawdis.net/taw3/online" title="Nivel de 
adecuación doble A, conforme a las directrices de la Web 
Accessibility Initiative">WAI AA</a></p> 

</body> 


</html> 


<?xml version="1.0" encoding="UTF-8">> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //ww.w3.org/TR/xhtml11/DTD/xhtmli-strict.dtd"> 

<html xmlins="http://wmw.w3.org/1999/xhtm1" xml:lang="es" lang="es"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=UTF-8" /> 

<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia"/> 

<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<hi>La gastronomía en la Garrotxa</h1> 

<hi>Menú</h1> 

<a href="fintroduccion" title="Descripción del taller">Introducción</a> 

<a href="f$platos tipicos" title="Conocimientos a adquirir">Platos típicos</a> 
<a href="gestadisticas" title="Guías que se 
utilizartamp;aacute;n">Estadisticas</a> 

<h2><a id="introduccion">1. Introducción</a></h2> 

<img src="foto garrotxa.gif" alt="Imagen del cráter de Santa Margadida" 
width="376" height="226" /> 

<p>La Garrotxa es una comarca de transición entre la montaña y el valle que 
se extiende entre el Pirineo y la Sierra Transversal. A pesar de la 
complejidad de la comarca, se distinguen dos sectores bien diferenciados y 
delimitados: la Alta Garrotxa y la Baixa Garrotxa. La primera, de relieve 
difícil, con poca vegetación, llena de congostos, simas y cuevas, da nombre a 
la comarca - Garrotxa = tierra áspera y rota -, y un placer para los 
excursionistas; la Baixa Garrotxa, de tierras suaves, plana, con prados y 





Vemos cómo se visualizará la imagen en nuestro navegador: 


O FUOC e P08/93133/01328 27 


Introducción a la n a la gastronomia de la Garrotxa - Mozilla Arefox -ioj x] 
Archivo Editar Ver Historial Delicious Hemrmamientas Ayuda 


 - G x A E| E nd ( [O] [tie:///C:/Documents and Set hr [Gl- Googe J 


























La gastronomía en la Garrotxa 
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Introducción Platos tipicos Estadisticas 


1. Introducción 





Cràter de SantaMargarida 


ENEE A A NENAS ES RSE AS TO 


2.5. Listas 


Una lista es una serie de elementos estructurados que nos permite organizar 
mejor nuestro texto. Hay tres tipos de listas: numeradas, sin numerar y de 
definición. 


2.5.1. Listas numeradas 


Las listas numeradas representarán sus elementos en el orden que ocupan en la 
lista. Para construir una lista numerada, necesitaremos el elemento ol (ordered 
list), que marcará el inicio y el final de una lista ordenada. Cada elemento de 


la lista estará marcado por el elemento li (list item). 
Aquí vemos un ejemplo: 


<ol> 

<li><a href="fintroduccion" >Introducción</a></1li> 
<li><a href="fplatos_tipicos" >Platos típicos</a></1li> 
<li><a href="testadisticas" >Estadísticas</a></li> 


</o1> 
Añadiremos una lista numerada en nuestro documento para ver el efecto: 


<?xml version="1.0" encoding="UTF-8"?> 

<IDOCTYPE himl PUBLIC "<= (WOC/ (DTD XHTML LD Strict EN” 

"http: //www.w3.org/TR/xhtm11/DTD/xhtmll-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 


<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<hl>La gastronomía en la Garrotxa</hl> 

<h1>Menú</h1> 

Sole 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</o1> 

<h2>1. Introducción<a name="introducción"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" width="376" height="226" /> 
<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 

con agua. Después, las pasáis por el cedazo Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 

De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 

azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 

6 o 7 minutos.</p> 

<h2>3. Estadísticas<a name="estadisticas"></a></h2> 

<p>Documento conforme W3C <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 

<a href="http://jigsaw.w3.org/css-validator/" title="Hojas de 

estilo revisadas cono el validador del W3C">CSS 2.0</a>]| 

<a href="http://www.tawdis.net/taw3/online" 

title="Nivel de adecuación doble A, conforme a las directrices 


de la Web Accessibility Initiative">WAI AA</a></p> 
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<?2xml version="1.0" encoding="UTF-8">> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //wnw.w3.org/TR/xhtm11/DTD/xhtml1-strict.dtd"> 

<html xmlins="http://wnmw.w3.org/1999/xhtm1" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 


<hi>La gastronomía en la Garrotxa</hi> 
<hi>Menú</hi> 

<ol> 

<li><a href="fintroduccion" title="Descripción del 
taller">Introducción</a></1i> 

<li><a href="$platos tipicos" title="Conocimientos a adquirir">Platos 
típicos</a></1li> 

<li><a href="ftestadisticas" title="Guías que se 
utilizartamp;aacute;n">Estadisticas</a></li> 
</ol> 

<h2><a id="introduccion">1. Introducción</a></h2> 


ri 
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La gastronomía en la Garrotxa 


r 
Menú 
1. Introducción 
2. Platos tipicos 
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- Estadisticas 


1. Introducción 


2.5.2. Listas sin numerar 


Las listas sin numerar, como indica el nombre, son también listas de elemen- 
tos. La diferencia con las listas numeradas es que, en lugar de marcar los ele- 


mentos con su orden dentro de la lista, los elementos se marcan con "puntos" 


(típicamente bolas negras). 


El elemento para construir la lista sin numerar será u1 (unordered list). 


Un ejemplo de lista sin enumerar sería el siguiente: 


<ul> 

<li> 500 gr de almendras ralladas</1li> 
<li> 450 gr de azúcar</li> 

<li> 200 gr de patata</li> 


<li> 25 gr de azúcar lustre</li> 
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<li> 2 huevos</1i> 
<li> 250 gr de castañas</li> 


</ul> 


Incluimos ahora una lista sin numerar en nuestro código: 


<?xml version="1.0" encoding="UTF-8"?> 

“IDOCIXEE him PUBLIC" "=/¿MIC//DID XHTML: Ll 0 SULLOLIIENS 

DEP Y UA MS 00 / TS mL ADIDAS tro. atar 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<hl>La gastronomía en la Garrotxa</hl> 

<h1>Menú</h1> 

<ol> 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</o1> 

<h2>1. Introducción<a name="introduccion"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" width="376" height="226" /> 
<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 

diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<ul> 

<li> 500 gr de almendras ralladas</1li> 

<li> 450 gr de azúcar</li> 

<li> 200 gr de patata</li> 

<li> 25 gr de azúcar lustre</li> 

<li> 2 huevos</li> 

<li> 250 gr de castañas</li> 


</ul> 
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<h4>Receta:</h4> 
<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 
el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 
de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 
<h2>3. Estadísticas<a name="estadisticas"></a></h2> 
<p>Documento conforme W3C <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://Jigsaw.w3.org/css-validator/" title="Hojas de 
estilo revisadas con el validador del W3C">CSS 2.0</a>| 
<a href="http://www.tawdis.net/taw3/online" 
title="Nivel de adecuación doble A, conforme a las 
directrices de la Web Accessibility Initiative">WAI AA</a></p> 


</body> 


</html> 





lolx] 
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</ol> 

<h2><a id="introduccion">1. Introducción</a></h2> 

<img src="foto_garrotxa.gif" alt="Imagen del cráter de Santa Margadida" 
width="376" height="226" /> 

<p>La Garrotxa es una comarca de transición entre la montaña y el valle que 
se extiende entre el Pirineo y la Sierra Transversal. A pesar de la 
complejidad de la comarca, se distinguen dos sectores bien diferenciados y 
delimitados: la Alta Garrotxa y la Baixa Garrotxa. La primera, de relieve 
difícil, con poca vegetación, llena de congostos, simas y cuevas, da nombre a 
la comarca - Garrotxa = tierra áspera y rota -, y un placer para los 
excursionistas; la Baixa Garrotxa, de tierras suaves, plana, con prados 


abundantes y corrientes de agua.</p> 

<h2><a id="platos tipicos">2. Platos típicos</a></n2> 
<nh3>PANELLETS DE CASTANYA</n3> 
<h4>Ingredientes:</n4> 


500 g de almendras ralladas</li> 
450 gy de azúcar</li> 

200 y de patata</li> 

25 g de azúcar lustre</li> 

2 huevos</li> 

250 g de castañas</li>] 





En el navegador se visualizaría así: 
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poca vegetación, llena de congostos, simas y cuevas, da nombre a la comarca - Garrotxa = tierra z| 
áspera y rota -, y un placer para los excursionistas; la Baixa Garrotxa, de tierras suaves, plana, con 
prados abundantes y corrientes de agua. 





























2. Platos típicos 
PANELLETS DE CASTANYA 
Ingredientes: 


500 g de almendras ralladas 
450 g de azúcar 

200 g de patata 

25 g de azúcar lustre 

2 huevos 


250 g de castañas 





[[F | Terminado 





2.5.3. Listas de definición (listas diccionario) 


Las listas de definición se utilizan para formatear un conjunto de palabras con 
sus correspondientes descripciones. Básicamente, son para tratar contenido 
de tipo diccionario (parejas de palabra, descripción). Estos tipos de listas se 
engloban con las etiquetas <d1> y </d1> (definition list). Mientras que para 
la palabra a describir se utiliza el elemento dt (definition-list term), para la 
definición dd (definition-list definition). 


Con un ejemplo lo veremos más claro: 


<dl> 

<dt>Perro</dt> 

<dd>animal de compañía</dd> 
<dt>Coche</dt> 

<dd>vehículo de autolocomoción</dd> 


afell 


En este caso, no lo incluimos en el documento de ejemplo, porque su funcio- 
namiento es similar al de las listas no numeradas. Pero si queréis, podéis hacer 


vosotros mismos la prueba incluyendo el código de ejemplo en el XHTML. 
2.6. Tablas 


Las tablas nos permiten representar y ordenar cualquier elemento de nuestro 
contenido en diferentes filas y columnas, de manera tal que grandes cantida- 
des de información se puedan representar de forma rápida y fácil. Es decir, las 


tenemos que utilizar para marcar "contenido tabular". 


Sobre el uso de las tablas 


Un uso bastante extendido, años atrás, consistía en maquetar el contenido de la web 
mediante tablas, ya que permitía estructurar y situar fácilmente todos los elementos de 
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la web. El uso de las tablas tiene que estar limitado a su función de representar grandes 
cantidades de información tabular de una manera ordenada. Utilizar las tablas para "ma- 
quetar" o "estructurar" nuestra web es del todo desaconsejable, ya que se hace bastante 
complicado realizar modificaciones posteriores en nuestro diseño de la página. No esta- 
mos dando información semántica del contenido, y además introducen mucho código 
dentro del contenido, lo cual hará que para los buscadores el contenido real tenga menos 
importancia dentro del documento. 


El contenido de una tabla tiene que estar dentro de las etiquetas <table> y 
</table>. 


Cada fila de la tabla se indica mediante las etiquetas <tr> y </tr>. Las eti- 
quetas <td> y </td> sirven para indicar las celdas individuales dentro de cada 
fila. Las columnas se calcularán automáticamente según el número de celdas 


que haya en cada fila. 


Un código de una tabla podría ser como el que sigue: 


<table> 


Dic > 


A 


td>Superficie</td> 


A 


ESA 


A 


td>km2</td> 
aiei 


NEES 


A 


td>Población</td> 


A 


td>46.060</td> 


A 


td>habitantes</td> 
ieie 


SEES 


A 


td>Densidad</td> 


A 


EOS El 


A 


td>habitantes/km2</td> 


aiee 





</table> 


Añadiremos una tabla en nuestro documento de ejemplo: 


<?xml version="1.0" encoding="UTF-8"?> 

ADOCMYPERATIIERUB TEOM WSC DTDEXATM NOS eee ENA 

A a N O O T R A E a e S eee a 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 


<hl>La gastronomía en la Garrotxa</hl> 
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<h1>Menú</h1> 

<ol> 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</ol> 

<h2>1. Introducción<a name="introducción"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" width="376" height="226" /> 
<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<ul> 

<li> 500 gr de almendras ralladas</1li> 

<li> 450 gr de azúcar</li> 

<li> 200 gr de patatas</1li> 

ls 219 ope elo eváblochs lusk res MS 

<li> 2 huevos</li> 

<li> 250 gr de castañas</li> 

</ul> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 

con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 

De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 

azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 

6 o 7 minutos.</p> 

<h2>3. Estadísticas<a name="estadisticas"></a></h2> 

<table> 

<tr> 

<td>Superficie</td> 

Scania). e 10 

<td>km2</td> 


</tr> 
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<tr> 
<td>Población</td> 
<td>46.060</td> 
<td>habitantes</td> 
SO 

Ss 
<td>Densidad</td> 


<P a UE ECE 





<td>habitantes/km2</td> 

</tr> 

</table> 

<p>Documento conforme W3C <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://Jigsaw.w3.org/css-validator/" 

title="Hojas de estilo revisadas con el 

validador del W3C">CSS 2.0</a>| 

<a href="http://www.tawdis.net/taw3/online" 

title="Nivel de adecuación doble A, conforme a las directrices 
de la Web Accessibility Initiative">WAI AA</a></p> 

</body> 


</html> 
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piezas redondeadas. Untarlas con clara de huevo batida y con unas gotas de 
agua y espolvorearlas con azucar. Finalmente hay que cocerlas a horno vivo 
(200 o 220 grados) entre 6 y 7 minutos.</p> 
<h2><1 id="estadistiques">3. Estadisticas</a></n2> 
<table> 
<tr> 
<td>Superficie</td> 
<td>734,2</td> 
<td>km2</td> 
</tr> 
<tr> 
<td>Población</td> 
<td>46.060</td> 
<td>habi tantes</td> 
</tr> 
<tr> 
<td>Densidad</td> 
<td>62,7</td> 
<td>habi tantes/km2</td> 
</tr> 
</table> 
<p>Documento conforme W3C <a href="http://validator.w3.org/" 





Veríamos la tabla de esta manera: 
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-= les) > E x A T| E mí (12 [tie:///C:/Documents and Set Y > [IG]: Googe J 























El 
Preparad un puré seco de castañas. Para hacerlo hay que escaldarlas, pelarlas y hervirlas en un 
recipiente donde el agua las cubra. Después se pasan por el cedazo. A parte. se elabora el mazapán: 
Siguiendo la misma receta de los panallets de piñones. De la masa resultante, tomar una tercera parte 
y mezclarla con el puré de castaña. Trabajarlo sobre el mármol espolvoreado con azúcar y dividirlo 
en piezas redondeadas. Untarlas con clara de huevo batida y con unas gotas de agua y 
espolvorearlas con azucar. Finalmente hay que cocerlas a horno vivo (200 o 220 grados) entre 6 y 7 
minutos. 
3. Estadísticas 
Superficie 734,2 km2 
Población 46.060 habitantes 
Densidad 62.7  habitantes'km2 
Documento conforme W3C XHTML 1.0/CSS 2. 0JWATAA 

” 

[TE | Teminado MIE [My 





2.7. Capas 


Las capas sirven para delimitar un fragmento de documento que puede conte- 
ner en el interior cualquier otro elemento, incluyendo otras capas. Una de las 
aplicaciones más útiles de las capas es la de dividir y estructurar nuestro con- 
tenido en sus partes principales, como cabecera del documento, menú, con- 
tenido y pie del documento. De esta manera, podremos estructurar de forma 
sencilla el documento y nos será mucho más fácil poder dar estilo a cada una 


de las partes de forma independiente, como veremos más adelante. 


La imagen siguiente ilustra una posible estructuración del contenido con ca- 
pas: 


a 
a 
Il 
o 
ou 
DU 
D 
b 
T 
© 
a 


<diw id="menu">=x*diw> 


<div id="contingut" ></div> 


<div id="peu">=<2diw > 


Las capas se representan con el elemento div. 
Aquí podemos ver un ejemplo muy sencillo: 


<div> 
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<h2> Encabezamiento de tipo 2</h2> 
<p>Texto descriptivo</p> 


</div> 


Para identificar la capa y darle un cierto tratamiento visual, tendremos que 
relacionarla con un identificador único mediante el atributo "id". Es aconseja- 
ble utilizar ID para describir el contenido que engloba la capa, con el fin de 


facilitar la comprensión posterior de la estructura. 


Siguiendo nuestro ejemplo anterior: 


<diw id="cabecera"> 
<h2>Encabezamiento de tipo 2</h2> 
<p>Texto descriptivo</p> 


</div> 


Si estructuramos nuestro documento con capas, el código quedaría de la forma 


siguiente: 


<?xml version="1.0" encoding="UTF-8"?> 

<IDOCIYPE Meml PUBLIC: "(MS /DID XHTML aO SE Eee EN" 

"http: //www.w3.org/TR/xhtml11/DTD/xhtmll-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia"/> 

<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<div id="cabecera"> 

<hl>La gastronomía en la Garrotxa</hl> 

</div> 

<div id="menu"> 

<h1>Menú</h1> 

<ol> 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</o1> 
</div> 

<div id="contenido"> 

<h2>1. Introducción<a name="introducción"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" width="376" height="226" /> 

<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 


que se estentre el Pirineo y la Cordillera Transversal. Aun la 
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complejidad de la comarca se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 
La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 
Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 
<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 
<h3>PANECILLOS DE CASTAÑA</h3> 
<h4>Ingredientes:</h4> 
le 
<li> 500 gr de almendras ralladas</1li> 
<li> 450 gr de azúcar</li> 
<li> 200 gr de patatas</li> 
<li> 25 gr de azúcar lustre</li> 
<li> 2 huevos</li> 
<li> 250 gr de castañas</li> 
</ul> 
<h4>Receta:</h4> 
<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 
el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 
de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 
<h2>3. Estadísticas<a name="estadisticas"></a></h2> 
<table> 


SEES 


A 


td>Superficie</td> 


A 


La 130, 2/05 


A 


td>km2</td> 
S/T 


<tr> 


A 


td>Población</td> 


A 


td>46.060</td> 


A 


td>habitantes</td> 
S/T 


SELF 


A 


td>Densidad</td> 


A 


IO ca 


A 


td>habitantes/km2</td> 


cie 





</table> 
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<p>Documento conforme W3C <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://Jigsaw.w3.org/css-validator/" 
title="Hojas de estilo revisadas con el validador 
del WC" "=03Ss 2.0=/20l 
<a href="http://www.tawdis.net/taw3/online" 
title="Nivel de adecuación doble A, conforme 
a las directrices del 
Web Accessibility Initiative">WAI AA</a></p> 
SS 
</body> 


ME mL> 


1. index.html - Bloc de notas 

Archivo Edición Formato Ver Ayuda 

<?xml version="1.0" encoding="UTF-8">> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //wnw.w3.org/TR/xhtml11/DTD/xhtmli-strict.dtd"> 

<html xmlins="http://wmw.w3.org/1999/xhtm1" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomia"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 


iol xi 


<hi>La gastronomía en la Garrotxa</hi> 
</div> 
<div id="menu"> 
<h1>Menú</h1> 
<ol> 
<li><a href="sintroduccion" title="Descripción del 
taller">Introducción</a></li> 
<li><a href="$platos tipicos" title="Conocimientos a adquirir">Platos 
típicos</a></1li> 
<li> <a href="festadisticas" title="Guias que se 





2.8. Otros 


Acabamos de ver algunos de los elementos básicos para el marcaje de docu- 
mentos en XHTML. A continuación, repasaremos otros elementos también 
bastante utilizados en XHTML. 


2.8.1. Elemento BR 


Este elemento sirve para forzar un salto de línea en nuestro documento. 


Se ha de ir con cuidado con el uso de este elemento, ya que muchas veces se 


utiliza de forma errónea como elemento de estilo para separar contenidos. 


Incluiremos una etiqueta <br /> en nuestro documento: 


<?xml version="1.0" encoding="UTF-8"7?> 

<DOCTYPE heml PUBLIC. "=(W3SC/ DTD XAML 1,0 Stcich) EN" 
"http://www. w3.org/TR/xhtmll/DID/xhtmll=strict.dtda"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 


<head> 


Tratamiento visual de 


capas 





La incorporación en nuestro 
código de las capas no tiene, 
hoy por hoy, ninguna repercu- 
sión visual. Más adelante, con 
el estudio de los CSS, veremos 
cómo dar tratamiento visual a 
las capas y otros elementos. 


BA GO 


Para una lista completa de 
todos los elementos para 

el marcaje de documen- 

tos en XHTML, podéis vi- 
sitar el enlace siguiente: 
http://www.w3.org/TR/REC- 
html40/index/elements.html 
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<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía" /> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<div id="cabecera"> 

<hl>La gastronomía en la Garrotxa</hl1> 

</div> 

<div id="menu"> 

<h1>Menú</h1> 

<ol> 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</ol> 

</div> 

<div id="contenido"> 

<h2>1. Introducción<a name="introduccion"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" 

width="376" height="226" /> 

<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal.<br />Aun la 
complejidad de la comarca se distinguen dos sectores bien 

diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. <br />La primera, 
ferega y de relieve difícil, con poca vegetación llena de 

desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<ul> 

<li> 500 gr de almendras ralladas</1li> 

<li> 450 gr de azúcar</li> 

<li> 200 gr de patatas</li> 

ASADO Ag EA de tazuco ri streS/ At 

<li> 2 huevos</li> 

<li> 250 gr de castañas</li> 

</ul> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 

con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 


mazapán; siguiendo la misma receta de los panecillos de piñones. 
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A C] [of xj 
<li><a href="festadisticas" title="Guías que se 
utilizaríamp:aacute;n">Estadisticas</a></li> 


<div id="contingut"> 

<h2><a id="introduccion">1. Introducción</a></n2> 

<img src="foto _garrotxa.gif" alt="Imagen del cráter de Santa Margadida" 
width="376" height="226" /> 

<p>La Garrotxa es una comarca de transición entre la montaña y el valle que 
se extiende entre el Pirineo y la Sierra Transversal.<br />A pesar de la 


complejidad de la comarca, se distinguen dos sectores bien diferenciados y 
delimitados: la Alta Garrotxa y la Baixa Garrotxa.<br />La primera, de 
relieve difícil, con poca vegetación, llena de congostos, simas y cuevas, da 


nombre a la comarca - Garrotxa = tierra áspera y rota -, y un placer para los 
excursionistas; la Baixa Garrotxa, de tierras suaves, plana, con prados 
abundantes y corrientes de agua.</p> 

<h2><a id="platos tipicos">2. Platos típicos</a></n2> 

<h3>PANELLETS DE CASTANYA</h3> 

<h4>Ingredientes:</n4> 

<ul> 

<li> 500 g de almendras ralladas</li> 

<li> 450 gy de azúcar</li> 





to: 


Introducción a la innhakk i E] 


O. -cx Ea 











kg ( O [tie:///C: Documents and Se | 7 [Gz Google 














ECT TEETE E 


La Garrotxa es una comarca de transición entre la montaña y el valle que se extiende entre el Pirineo 
y la Sierra Transversal. 

A pesar de la complejidad de la comarca, se distinguen dos sectores bien diferenciados y 
delimitados: la Alta Garrotxa y la Baixa Garrotxa. 

La primera, de relieve dificil, con poca vegetación, llena de congostos, simas y cuevas, da nombre a 
la comarca - Garrotxa = tierra áspera y rota -, y un placer para los excursionistas; la Baixa Garrotxa, 
de tierras suaves, plana, con prados abundantes y corrientes de agua. 


2. Platos típicos 
PANELLETS DE CASTANYA 
Ingredientes: 


500 g de almendras ralladas 
450 g de azúcar 

200 g de patata 

25 g de azúcar lustre 

e 2 huevos 


[FE] [Terminado 








2.8.2. Elemento ACRONYM 


Este elemento se utiliza para marcar acrónimos, es decir, palabras formadas 
por las sigles o partes de otras palabras. En el atributo title especificaremos el 
texto completo. Eso sí, no nos tenemos que olvidar de especificar el lenguaje 
del acrónimo si éste es diferente al del documento. Dentro de los tags especi- 


ficaremos el acrónimo tal como podemos ver en el ejemplo siguiente. 
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<acronym title="World Wide Web Consortium" xml:lang="en">W3C</acronym> 


Vemos cómo quedará nuestro código de ejemplo con un elemento acrónimo: 


<?xml version="1.0" encoding="UTF-8"?> 

« IDOCICEE Aca PUBLIO: EMS DTD ATM) LO Soi y EN 

"ALEPI ww. w3 05 g/TR/3htimll/DTID/=htmll-striot.dtat> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<div id="cabecera"> 

<hl>La gastronomía en la Garrotxa</hl> 

</div> 

<div id="menu"> 

<h1>Menú</h1> 

<ol> 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</o1> 

</div> 

<div id="contenido"> 

<h2>1. Introducción<a name="introduccion"></a></h2> 

SM Bre="toto_gartobka gi" 

alt="imagen del cráter de Santa Margalida" 

width="376" height="226" /> 

<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<ul> 

<li> 500 gr de almendras ralladas</1li> 

<li> 450 gr de azúcar</li> 


<li> 200 gr de patatas</li> 
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ASILO SR AS Se A 

<li> 2 huevos</li> 

<li> 250 gr de castañas</li> 

</ul> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 

<h2>3. Estadísticas<a name="estadisticas"></a></h2> 

<table> 


SUS 


A 


td>Superficie</td> 


A 


PU SAS d 


A 


td>km2</td> 
E 


<tr> 


A 


td>Población</td> 


A 


td>46.060</td> 


A 


td>habitantes</td> 
ES 


SEES 


A 


td>Densidad</td> 


<td>62,7</td> 





<td>habitantes/km2</td> 

SS 

</table> 

<p>Documento conforme <acronym title="World Wide Web Consortium" 
xml: lang="en">W3C</acronym> <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://jigsaw.w3.org/css-validator/" 

title="Hojas de estilo revisadas con el validador del W3C">CSS 2.0</a>| 
<a href="http://www.tawdis.net/taw3/online" 

title="Nivel de adecuación doble A, conforme a las directrices 
de la Web Accessibility Initiative">WAI AA</a></p> 

</div> 

</body> 


</html> 
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<td>Población</td> 

<td>46.060</td> 

<td>habitantes</td> 

</tr> 

<tr> 

<td>Densidad</td> 

<td>62,7</td> 

<td>habitantes/km2</td> 

</tr> 
</table> 
<p>Documento conforme <acronym title="World Wide Web Consortiun" 
xml: lang="en">W3C</acronym>| <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>|<a 
href="http://jigsaw.w3.org/css-validator/" title="Hojas de 
estilo revisadas con el validador del W3C">CSS 2.0</a>|<a 
href="http://ww.tawdis.net/taw3/online" title="Nivel de adecuación doble A, 
conforme a las directrices del Web Accessibility Initiative">WAI AA</a>/p> 
</div> 
</body> 
</html> 





En la siguiente imagen, podemos ver el efecto del elemento acronym cuando 
tenemos el ratón sobre este elemento, en nuestro caso, el texto "W3C". Pode- 
mos apreciar también que este elemento destaca visualmente porque el texto 
aparece subrayado con puntos. 


















Introducción a la gastronomia de la Garrotxa - Mozilla Arefox -iof xi 
Archivo Editar Ver Historial Delicious Hemamientas Ayuda 
O - a Xx e Ei mí ( [2 [tile:///C:/Documents and Se Ly ~ 
E E 
Preparad un puré seco de castañas. Para hacerlo hay que escaldarlas, pelarlas y hervirlas en un 


recipiente donde el agua las cubra. Después se pasan por el cedazo. A parte, se elabora el mazapán: 
Siguiendo la misma receta de los panallets de piñones. De la masa resultante, tomar una tercera parte 

















y mezclarla con el puré de castaña. Trabajarlo sobre el mármol espolvoreado con azúcar y dividirlo 
en piezas redondeadas. Untarlas con clara de huevo batida y con unas gotas de agua y 
espolvorearlas con azucar. Finalmente hay que cocerlas a horno vivo (200 o 220 grados) entre 6 y 7 
minutos. 


3. Estadísticas 


Superficie 734,2 km2 
Población 46.060 habitantes 
Densidad 62.7  habitantes'km2 


Documento conforme W3C XHTML 1.0/€SS 2. 0WAIAA 


SM 





2.8.3. Elemento ADDRESS 


Este elemento nos sirve para marcar información de contacto, ya sea una di- 


rección, firma o autor del documento. 


La etiqueta <address> no se tendría que utilizar para marcar una dirección 


postal, a menos que ésta esté dentro de la parte de información de contacto. 


Visualización del elemento ADDRESS 


Normalmente, se visualiza en los navegadores en itálico. La mayoría de navegadores aña- 
dirán un salto de línea antes y después del elemento, pero si queremos saltos de línea 
dentro de los tags les tendremos que añadir nosotros. 
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Añadiremos este elemento en nuestro documento de ejemplo, indicando la 


dirección del autor del documento. 


<?xml version="1.0" encoding="UTF-8"?> 

IDOCICEE Aca PUBLIC: UY YM3C/7DTD AHTML Lol Scion" 

MA BEPIVI WO MS 09/18 3A mil/DTD/2Atall-StELOr. atar 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<div id="cabecera"> 

<hl>La gastronomía en la Garrotxa</hl> 

</div> 

<div id="menu"> 

<h1>Menú</h1> 

<ol> 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</o1> 

</div> 

<div id="contenido"> 

<h2>1. Introducción<a name="introduccion"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" 

width="376" height="226" /> 

<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

<ul> 

<li> 500 gr de almendras ralladas</1li> 

<li> 450 gr de azúcar</li> 

<li> 200 gr de patatas</li> 


<li> 25 gr de azúcar lustre</li> 
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<li> 2 huevos</li> 

<li> 250 gr de castañas</li> 

</ul> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 

<h2>3. Estadísticas<a name="estadisticas"></a></h2> 

<table> 

IES 


<td>Superficie</td> 


<a> 134,22 107 
<td>km2</td> 

</tr> 

<tr> 
<td>Población</td> 
<td>46.060</td> 
<td>habitantes</td> 
</tr> 

<tr> 


<td>Densidad</td> 


«Lab. 1/07 





<td>habitantes/km2</td> 

SES 

</table> 

<address> 

Pere Barnola<br /> 

Diagonal, 376, 8A<br /> 

08037 Barcelona 

</address> 

<p>Documento conforme <acronym title="World Wide Web Consortium" 
xml:lang="en">W3C</acronym> <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://jigsaw.w3.org/css-validator/" title="Hojas de estilo 
revisadas con el validador del W3C">CSS 2.0</a>] 

<a href="http://www.tawdis.net/taw3/online" 

title="Nivel de adecuación doble A, conforme a las directrices 
de la Web Accessibility Initiative">WAI AA</a></p> 

</div> 


</body> 
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</html> 
Archivo Edición Formato Ver Ayuda 


<td>Población</td> 

<td>46.060</td> 

<td>habitantes</td> 

</tr> 

<tr> 

<td>Densidad</td> 

<td>62,7</td> 

<td>habitantes/km2</td> 

</tr> 
</table> 
<address> 

Pere Barnola<br /> 
Diagonal, 376, 8A<br /> 
08037 Barcelona 

</address> 
kp>Documento conforme <acronym title="World Wide Web Consortium" 
xml: lang="en">W3C</acronym> <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>|<a 
href="http://jigsaw.w3.org/css-validator/" title="Hojas de 
estilo revisadas con el validador del W3C">CSS 2.0</a>|<a 





En el navegador, podemos apreciar que el texto que figura dentro de las eti- 
quetas del elemento <address> está tratado como texto itálico. 


Introducción a la gastronomia de la Garrotxa - Mozilla Arefox -iof xi 
Archivo Editar Ver Historial Delicious Hemamientas Ayuda 


O y ES > a Xx e J mí MS au y [Glz Google P 


Siguiendo la misma receta de los nalis de piñones. De la masa E tomar una tercera e 
y mezclarla con el puré de castaña. Trabajarlo sobre el mármol espolvoreado con azúcar y dividirlo 
en piezas redondeadas. Untarlas con clara de huevo batida y con unas gotas de agua y 
espolvorearlas con azucar. Finalmente hay que cocerlas a horno vivo (200 o 220 grados) entre 6 y 7 
minutos. 




















3. Estadísticas 


Superficie 734,2 km2 
Población 46.060 habitantes 
Densidad 62.7 habitantes 'km2 
Pere Barnola 


Diagonal, 376, 84 
08037 Barcelona 





Documento conforme W3C XHTML 1.0/€SS 2. 0WAIAA 


A E 
2.8.4. Elemento SPAN 


El elemento span se utiliza para agrupar y estructurar partes específicas de 
texto de la misma manera que hacíamos con el div. La única diferencia es 
que el div es un elemento de tipo blog y el span es de tipo "inline". Eso quiere 
decir que el elemento span nos mantendrá su contenido en la misma línea a 
diferencia del div, que siempre nos forzará un salto de línea antes y después. 
Ya entraremos más adelante, cuando veamos la parte de estilos, en la utilidad 
de este tag. 


Un ejemplo de uso del elemento sería el siguiente: 


<p>Este es un texto normal en nuestro documento 


<Span id="destacat">este otro texto tendrá una 
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Característica visual especial</span></p> 


Pondremos unos cuantos elementos span en nuestro documento de ejemplo, 


aunque no tendrá ninguna repercusión visual de momento. 


<?xml version="1.0" encoding="UTF-8"?> 

IDOCICEE Aca PUBLIC UY YM3C/7DTD AHTML Lol Seccion" 

MA TEPIVIWIWO MS 00/18 3A mil/DITD/2Acall-StELOr. dato 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía" /> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

</head> 

<body> 

<div id="cabecera"> 

<hl>La gastronomía en la Garrotxa</hl> 

</div> 

<div id="menu"> 

<h1>Menú</h1> 

<> 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</o1> 

</div> 

<div id="contenido"> 

<h2>1. Introducción<a name="introduccion"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" 

width="376" height="226" /> 

<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 
diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

iS 

<li> 500 gr de almendras ralladas</1li> 


<li> 450 gr de azúcar</li> 
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<li> 200 gr de patatas</1li> 

ASTON SR AUS Se Ae 

<li> 2 huevos</1li> 

<li> 250 gr de castañas</li> 

</ul> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 

<h2>3. Estadísticas<a name="estadisticas"></a></h2> 

<table> 


LIE 


A 


td>Superficie</td> 


A 


o DA, 2 


A 


td>km2</td> 
E 


<tr> 


A 


td>Población</td> 


A 


td>46.060</td> 


A 


td>habitantes</td> 
ES 


<tr> 


A 


td>Densidad</td> 


«Lab. 1/07 





<td>habitantes/km2</td> 

SES 

</table> 

<address> 

Pere Barnola<br /> 

Diagonal, 376, 8A<br /> 

08037 Barcelona 

</address> 

<p>Documento conforme <acronym 

title="World Wide Web Consortium" xml:lang="en">W3C</acronym> 
<a href="http://validator.w3.org/" 

title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://Jjigsaw.w3.org/css-validator/" 

title="Hojas de estilo revisadas con el validador del W3C">CSS 2.0</a>| 
<a href="http://www.tawdis.net/taw3/online" 


title="Nivel de adecuación doble A, conforme a las directrices 
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de la Web Accessibility Initiative">WAI AA</a></p> 
FA 
</body> 


</html> 


1 index html - Bloc de notas -iof xi 
Archivo Edición Formato Ver Ayuda 

<h3>PANELLETS DE CASTANYA</n3> 

<h4>Ingredientes:</n4> 


500 g de almendras ralladas</li> 
450 g de azúcar</li> 

200 gy de patata</li> 

25 g de azúcar lustre</li> 

2 huevos</li> 

250 yg de castañas</li> 


<h4>Receta: </h4> 

<p>Preparad un puré seco de castañas. <span id="destacat1">Para hacerlo hay 

que escaldarlas, pelarlas y hervirlas en un recipiente donde el agua las 
cubra</span>. Después se pasan por el cedazo. A parte, se elabora el mazapán; 
Siguiendo la misma receta de los panallets de piñones. De la masa resultante, 
tomar una tercera parte y mezclarla con el puré de castaña. <span 
id="destacat2">Trabajarlo sobre el mármol espolvoreado con azúcar y dividirlo 
en piezas redondeadas</span>. Untarlas con clara de huevo batida y con unas 
gotas de agua y espolvorearlas con azucar. Finalmente hay que cocerlas a 

horno vivo (200 o 220 grados) entre 6 y 7 minutos.</p> xl 





2.9. Validaciones 


Una vez tengamos nuestro documento XHTML con todo el contenido bien 
etiquetado y correctamente estructurado, convendría que nuestro código es- 
tuviera validado por los últimos estándares web. 


Tenemos tres maneras de validar nuestro código XHTML: 
1) Señalando la dirección de nuestro documento a validar. 


2) Señalando el nombre y la ruta del archivo dentro de nuestro orde- 


nador. 


3) Copiando el código y enganchándolo en el área de texto indicada 


en el web. 


Una vez hecho el análisis, el validador nos dará información sobre cualquier 
error detectado en nuestro código. Estas indicaciones que nos devuelva el va- 
lidador siempre serán relativas a la versión del XHTML que hayamos especifi- 
cado en el elemento DOCTYP1 





E 


Los errores más típicos son el cierre erróneo de etiquetas de elementos y los 


imbricados no permitidos de algunos elementos. 


Ventajas de la validación 


Las ventajas de seguir los estándares y tener la web completamente validada son muchos. 
Todavía hoy en día nos encontramos con que la mayoría de webs no siguen los estánda- 
res. Por lo tanto, tener validado nuestra web ya nos coloca en un paso por encima de 
muchas webs en este sentido. Además, si seguimos los últimos estándares y separamos 
el contenido de la manera en cómo éste se muestra, tenemos, por una parte, una estruc- 
turación de nuestra web mucho más óptima y, por otra parte, una mejor valoración de 


Validador del W3C 





La principal herramienta pa- 

ra la validación de documen- 
tos XHTML es el validador del 
W3C, que podremos encontrar 
en: http://validator.w3.org/ 
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nuestra web por parte de buscadores como Google o Yahoo, lo cual supone que saldremos 
antes en las buscas, hecho que se traduce en más presencia en Internet. 
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3. Caso práctico: "nuestra primera web" 


El objetivo de esta actividad será conocer y utilizar de forma correcta los ele- 
mentos que hemos estado describiendo con anterioridad, y la importancia que 


aporta el significado semántico al contenido. 
Se adjuntará un contenido sin marcar, al cual se tendrá que dar formato. 
Resultado final del caso práctico visto a lo largo del módulo 


<?xml version="1.0" encoding="UTF-8"?> 
DOCM PE Tari RUBELT OMENS C DEX HEMO ee e ENA 
a O N N OO E R N e eE S ee E 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 
<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 
</head> 
<body> 
<div id="cabecera"> 
<hl>La gastronomía en la Garrotxa</hl> 
</div> 
<div id="menu"> 
<h1>Menú</h1> 
<ol> 
<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</o1> 
</div> 
<div id="contenido"> 
<h2>1. Introducción<a name="introduccion"></a></h2> 
<img src="foto_garrotxa.gif" alt="imagen del cráter de 
Santa Margalida" width="376" height="226" /> 
<p>La Garrotxa una comarca de transicitre la montaña 
y la plana<a[planalllanura]>, que se 'estentre el Pirineo y la Cordillera Transversal. 
A pesar de la complejidad de la comarca se distinguen dos sectores 
bien diferenciados y delimitados: el Alta Garrotxa y la Baja Garrotxa. 
La primera, ferega y de relevo<a[relevo|relieve]> difl, con poca vegetaci llena de 
desfiladeros, simas y cuevas, dnom en la comarca -Garrotxa = 
tierra áspera y rotura-, y un paradper a los excursionistas; 


la Baja Garrotxa, de sierras suaves y depresiones volcques, mplanera, 
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con prados abundantes y corrientes d'aigua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 
<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 

les 

<li> 500 gr de almendras ralladas</1li> 

ASIS Ud SAS SA 

<li> 200 gr de patatas</1li> 

<li> 25 gr de azúcar lustre</li> 

<li> 2 huevos</li> 

<li> 250 gr de castañas</li> 

</ul> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 

<h2>3. Estadísticas<a name="estadisticas"></a></h2> 

<table> 

<tr> 


<td>Superficie</td> 


PASS 
<td>km2</td> 

</tr> 

<tr> 
<td>Población</td> 
<td>46.060</td> 
<td>habitantes</td> 
</tr> 

<tr> 


<td>Densidad</td> 


Lar IA OA 





<td>habitantes/km2</td> 
SS 

</table> 

<address> 

Pere Barnola<br /> 
Diagonal, 376, OA Dr > 
08037 Barcelona 
</address> 


<p>Documento conforme <acronym 
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title="World Wide Web Consortium" xml:lang="en">W3C</acronym> 
<a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 


<a href="http://Jjigsaw.w3.org/css-validator/" 


title="Hojas de estilo revisadas con el validador del W3C">CSS 2.0</a>| 


<a href="http://www.tawdis.net/taw3/online" 

title="Nivel de adecuación doble A, conforme a las directrices 
de la Web Accessibility Initiative">WAI AA</a></p> 

</div> 

</body> 


</html> 


Comentario sobre el caso práctico 


Como vemos en esta posible solución que hemos planteado, tenemos, en pri- 
mer lugar, la definición del XML y del DOCTYPE, necesarios para poder cons- 
truir un XHTML válido. Después nos encontramos con el elemento html que 
contiene al mismo tiempo los dos elementos esenciales para la construcción 
de nuestro documento, el head y el body. Tal como hemos aprendido, el head 
contiene información relativa al documento como el title y los elementos 
meta que sirven para especificar al autor del documento o las palabras clave 


que lo definen. 


En el body nos encontramos con el contenido de nuestro documento. Este 
contenido lo hemos estructurado en distintos elementos div, en nuestro caso 
con tres: uno para la cabecera, otro para el menú y, finalmente, otro para el 


contenido. 


Vemos cómo el título de cada sección de nuestro contenido lo hemos etique- 
tado con encabezamientos. Eso, aparte de diferenciar cada sección de forma 
visual, hará que tengamos una mejor valoración por parte de los buscadores 


web. 


Finalmente, hay que comentar que la utilización de los elementos está relacio- 
nada con su finalidad. Es decir, cuando tenemos un texto explicativo utiliza- 
mos el elemento p, cuando tenemos, como en nuestro caso, una receta donde 
tenemos que enumerar los ingredientes, utilizamos el elemento u1, o cuando 
tenemos información susceptible de ser ordenada en filas y columnas, como 


las estadísticas de densidad de la Garrotxa, utilizamos tablas. 
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Finalmente, comprobaremos que nuestro código cumple todos los re- 
quisitos para ser una web perfectamente validada por los últimos están- 
dares. Si el resultado de la validación es una cosa como: "This Page Is 
Valid XHTML 1.0 Strict", ya estaremos preparados para avanzar en el 
capítulo siguiente 


